<script setup>
import { defineProps, watch, ref, onMounted, onUnmounted, nextTick } from 'vue'
// import { ElButton, ElSwitch } from 'element-plus'


const props = defineProps({
    options: { type: Object, default: () => ({}) },
    apiData: { type: Object, default: () => ({}) },
    busStore: { type: Object, default: () => ({}) },
    privateStore: { type: Object, default: () => ({}) },
    ownStore: { type: Object, default: () => ({}) }
})
const options = ref(props.options)
// 监听配置项变化
watch(() => props.options, (newValue, oldValue) => {
    options.value = newValue
}, { deep: true })

// 监听接口数据变化
watch(() => props.apiData, (newValue, oldValue) => {
    console.log('接口数据变化：', newValue, oldValue)
}, { deep: true })

// 监听公用数据变化
watch(() => props.busStore, (newValue, oldValue) => {
    console.log('公用数据变化：', newValue, oldValue)
}, { deep: true })

// 监听私有数据变化
watch(() => props.privateStore, (newValue, oldValue) => {
    console.log('私有数据变化：', newValue, oldValue)
}, { deep: true })

</script>

<template>
    <div class="image_free glass-container" :style="{
        backgroundColor: options.backgroundColor,
        width: options.imageWidth,
        height: options.imageHeight,
        borderRadius: options.borderRadius,
    }">
        <img class="glass-card" v-if="options.imageUrl" :src="options.imageUrl" :style="{
            width: options.imageWidth,
            height: options.imageHeight,
            borderRadius: options.borderRadius,
            opacity: options.imageOpacity,
            filter: `blur(${options.imageBlur}px)`,
        }" alt="">
    </div>
</template>

<style scoped lang="scss">

.image_free {
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>